<template>
  <div >
      <el-row style="margin-left: 100px">
        <img src="static/image/logo.png"  alt="logo.png" class="img-responsive" />
        <label style="margin-top: 60px;margin-left: 100px"><h3>CIrcRNA coding Capability and profile Detection Algorithm</h3>
        </label>
      </el-row>
    <el-affix>
      <el-row style="background: rgb(26,35,57)">
        <el-col :span="18" :offset="2">
          <el-menu
            router
            :default-active="$router.currentRoute.value.fullPath=='/'?'/home':$router.currentRoute.value.fullPath"
            class="el-menu-demo"
            mode="horizontal"
            background-color="rgb(26,35,57)"
            text-color="white"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-menu-item index="/home" >
              <template #title>
                <el-icon>
                  <home-filled></home-filled>
                </el-icon>
                <span style="font-size: large">Home</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/help">
              <el-icon>
                <QuestionFilled></QuestionFilled>
              </el-icon>
              <span style="font-size: large">Help</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-affix>
  </div>

</template>

<script>
import {ref} from "vue";
import {HomeFilled, Location, QuestionFilled, WalletFilled} from "@element-plus/icons-vue";

export default {
  name: "Header",
  components: {WalletFilled, QuestionFilled, HomeFilled, Location},
  setup(){
    const activeIndex = ref('1')
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
      activeIndex,
      handleSelect
    }
  }
}
</script>

<style scoped>

.img-responsive {
  height: 82px;
  max-width: 100%;
  margin: 10px 10px 10px 22px;
  width: 25%;
}
/deep/.el-menu-demo{
  width: 100%;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
}

</style>
